<div class="panel panel-default">
    <div class="panel-heading">
        <h5 >表格样式设置</h5>
    </div>
	<div class="panel-body">	
		<h4>table表格</h5>
	      .table-condensed：紧凑 table-striped:隔行底色不同      table-hover：鼠标移动选择行  table-bordered:网格
		<pre>
		${'
	 	<table class="table table-condensed table-bordered table-striped ">
	 	<div class="table-responsive"> 表格自动响应 ，    当屏幕宽度缩小时，表格可以出现滚动条（IE9在frame下不支持）
	  	'?html
	  	} 
		</pre>
	      .table-condensed：紧凑 table-striped:隔行底色不同      table-hover：鼠标移动选择行  table-bordered:网格
	      <table class="table table-condensed table-bordered  table-hover table-striped ">
	        <thead>
	          <tr>
	            <th>#</th>
	            <th>First Name</th>
	            <th>Last Name</th>
	            <th>Username</th>
	          </tr>
	        </thead>
	        <tbody>
	          <tr>
	            <td>1</td>
	            <td>Mark</td>
	            <td>Otto</td>
	            <td>@mdo</td>
	          </tr>
	          <tr>
	            <td>2</td>
	            <td>Jacob</td>
	            <td>Thornton</td>
	            <td>@fat</td>
	          </tr>
	          <tr>
	            <td>3</td>
	            <td>Larry</td>
	            <td>the Bird</td>
	            <td>@twitter</td>
	          </tr>
	        </tbody>
	      </table>   
	      
	   表格每行显示不同样式，用于监控特殊行的记录
	   <div class="bs-example">
	      <table class="table">
	        <thead>
	          <tr>
	            <th>#</th>
	            <th>Column heading</th>
	            <th>Column heading</th>
	            <th>Column heading</th>
	          </tr>
	        </thead>
	        <tbody>
	          <tr class="active">
	            <td>1</td>
	            <td>Column content</td>
	            <td>Column content</td>
	            <td>Column content</td>
	          </tr>
	         
	          <tr class="success">
	            <td>3</td>
	            <td>Column content</td>
	            <td>Column content</td>
	            <td>Column content</td>
	          </tr>
	          <tr class="warning">
	            <td>5</td>
	            <td>Column content</td>
	            <td>Column content</td>
	            <td>Column content</td>
	          </tr>
	          <tr class="danger">
	            <td>7</td>
	            <td>Column content</td>
	            <td>Column content</td>
	            <td>Column content</td>
	          </tr>
	        </tbody>
	      </table>
	    </div>      
	    
	    当屏幕宽度缩小时，表格可以出现滚动条（IE9在frame下不支持）
	      <div class="table-responsive">
	        <table class="table">
	          <thead>
	            <tr>
	              <th>#</th>
	              <th>Table heading</th>
	              <th>Table heading</th>
	              <th>Table heading</th>
	              <th>Table heading</th>
	              <th>Table heading</th>
	              <th>Table heading</th>
	            </tr>
	          </thead>
	          <tbody>
	            <tr>
	              <td>1</td>
	              <td>Table cell</td>
	              <td>Table cell</td>
	              <td>Table cell</td>
	              <td>Table cell</td>
	              <td>Table cell</td>
	              <td>Table cell</td>
	            </tr>
	            <tr>
	              <td>2</td>
	              <td>Table cell</td>
	              <td>Table cell</td>
	              <td>Table cell</td>
	              <td>Table cell</td>
	              <td>Table cell</td>
	              <td>Table cell</td>
	            </tr>
	            <tr>
	              <td>3</td>
	              <td>Table cell</td>
	              <td>Table cell</td>
	              <td>Table cell</td>
	              <td>Table cell</td>
	              <td>Table cell</td>
	              <td>Table cell</td>
	            </tr>
	          </tbody>
	        </table>
	      </div>
	 
	
	  
	</div>
</div>

